<template>
    <div
        class="shop-con"
        :style="{
            borderRadius: `${data.rpxStyle['border-radius']}px`,
        }"
    >
        <div
            class="shop-head cls-between"
            :style="{
                background: `linear-gradient(180deg, ${data.style.start_color}, #fff)`,
            }"
        >
            <div class="shop-head__left cls-flex line-one">
                <span class="shop-head__name" :style="{ color: data.style.head_color }"
                    >{{ data.data.trade_info.trade_name }}({{ data.data.trade_info.start_time }}~{{ data.data.trade_info.end_time }})</span
                >
            </div>
            <div class="shop-head__right cls-flex" :style="{ color: data.style.head_color }">下一场开始({{ data.data.trade_info.next_time }})</div>
        </div>
        <div class="trade-two flexs">
            <span>实时成交价</span>
            <span
                >本场成交量：<em class="trade-two__price" :style="{ color: data.style.head_color }">
                    {{ data.data.trade_info.total_nums || 0 }}{{ data.data.trade_info.unit }}</em
                >
            </span>
        </div>
        <div class="trade-list flexs" v-if="data.data.data.length > 0">
            <div class="trade-item" v-for="item in data.data.data" :key="item.cate_id">
                <p class="trade-title line-one">{{ item.cate_title }}</p>
                <div class="trade-price cls-center">
                    <em class="trade-price__em">￥</em>{{ item.today_price }}<img class="trade-price__icon" :src="Number(item.change_rate) > 0 ? up : down" />
                </div>
                <p class="trade-nums">{{ item.change_rate }}%</p>
            </div>
        </div>
        <div v-else>暂无交易商品</div>
    </div>
</template>

<script setup>
import up from "@assets/design/up.png"
import down from "@assets/design/down.png"

/**
 * 交易场次
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 11,
            type_name: "trade_session",
            text: "交易场次",
            style: {
                background: "#fff",
                color: "#333",
                icon_switch: false,
            },
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                data: [],
            },
        },
    },
})
</script>

<style lang="less" scoped>
.trade-list {
    flex-flow: row wrap;
    .trade-item {
        flex: none;
        width: 33.3%;
        text-align: center;
        overflow: hidden;
        margin-bottom: 20px;
        .trade-title {
            font-size: 12px;
            color: #333;
        }
        .trade-price {
            width: 100%;
            color: #333;
            font-size: 16px;
            font-weight: bold;
            overflow: hidden;
            margin: 4px 0px;
            .trade-price__em {
                font-size: 14px;
            }
            .trade-price__icon {
                width: 15px;
                height: 15px;
                margin-left: 3px;
                overflow: hidden;
            }
        }
        .trade-nums {
            color: #666;
            font-size: 12px;
        }
    }
}
.shop-con {
    background-color: #fff;
    overflow: hidden;
    .shop-head {
        overflow: hidden;
        padding: 10px 14px 2px;
        .shop-head__left {
            flex: 1;
            margin-right: 20px;
            .shop-head__name {
                font-weight: bold;
                font-size: 16px;
            }
        }
        .shop-head__right {
            flex: none;
            font-size: 12px;
            font-weight: 500;
        }
    }
    .trade-two {
        color: #666;
        font-size: 14px;
        margin: 0px 14px;
        margin-bottom: 14px;
        padding-bottom: 9px;
        overflow: hidden;
        border-bottom: 1px solid #f6f6f6;
        .trade-two__price {
            font-weight: bold;
        }
    }
}
</style>
